<template>
  <f7-popup id="addfriend">
    <div class="view">
      <div class="page">
        <f7-navbar>
          <f7-nav-left>
            <f7-link close-popup ><i class="f7-icons">chevron_left</i></f7-link>
          </f7-nav-left>
          <f7-nav-center title="添加朋友"></f7-nav-center>
        </f7-navbar>

        <div class="editor-container">
          
          <ul class="tools flex-row">
            <li class="tool">
              <input type="text" v-model="searchInfo.name" placeholder="昵称/账号"/>
              <f7-link @click="searchUser">
                <i class="f7-icons">search</i>
              </f7-link>
            </li>
          </ul>

        <div>
          <f7-list searchInfo.contacts>
            <f7-list-group v-for="(group, key) in searchInfo.contacts">
              <f7-list-item :title="key" group-title></f7-list-item>
              <f7-list-item v-for="item in group"
                            :title="item.nickname"
                            :media="getAvatarMedia(item)"
              ><f7-button class="more" @click="addFriend(item)" color="#c4cbd2">添加好友</f7-button></f7-list-item>
            </f7-list-group>
          </f7-list>
        </div>

        </div>

      </div>
    </div>

  </f7-popup>
</template>


<script>
  import {getUserList} from '../api/api'
  import groupBy from 'lodash/groupBy'
  import {IMG_URL} from '../api/url'
  export default {
    data() {
      return {
        searchInfo: {
          name: "",
          contacts: []
        }
      }
    },
    methods: {
      searchUser() {
        if (!this.searchInfo.name){
          this.$f7.alert("请输入查询账号", "hichat");
          return false;
        }
        this.$f7.showIndicator();
        var obj = {
          param: {   
            oredCriteria: [
              {
                criteria: [{
                   "condition": "account like ",
                   "value": "%" + this.searchInfo.name + "%",
                   "singleValue": true
                }]
              }
            ]
          },
          pageInfo: {
            pageNum:1,
            pageSize:200
          }
        }
        var json=JSON.stringify(obj);
        getUserList(json).then(data => {
          if (data.status == 200) {
            this.$f7.hideIndicator();
            this.searchInfo.contacts = groupBy(data.data.list, 'header');
          } else {
            this.$f7.alert(data.msg, "hichat");
          }
        });
      },
      addFriend(item){
           this.$emit("add-friend", item.id);
      },
      getAvatarMedia(item){
        return "<img class='avatar' src='" + IMG_URL + "/" + item.avatar + "'/>";
      },
      clearContent() {
        this.searchInfo.name = "";
      }
    }
  }
</script>

<style lang="less" scoped>

  .editor-container {
    margin-top:70px;
    input {
      width: 80%;
      height: 30px;
      font-size: 15px;
      border: 1px solid #efefef;
      color: #444;
    }

    .tools {
      width: 100%;
      height: 40px;
      background-color: #f9f9f9;
      border-bottom: 1px solid #dadada;
      border-top: 1px solid #dadada;
      list-style: none;
      margin: 0;
      padding: 0;
      margin-top: -5px;

      .tool {
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 40px;

        .iconfont {
          color: #666;
        }

      }
    }
  }
  /deep/ .avatar {
    width: 50px;
    height: 50px;
  }
</style>


